<template>
  <!--查询-->
  <el-form :inline="true" :model="queryNewsForm" class="demo-form-inline">
    <el-form-item label="计算机名称">
      <el-input v-model="queryNewsForm.name" placeholder="计算机名称" clearable/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="queryNews">Query</el-button>
    </el-form-item>
  </el-form>

  <!--  表格-->
  <el-table :data="tableData.newsList" style="width: 100%">
    <el-table-column fixed prop="id" label="id"/>
    <el-table-column prop="name" label="新闻标题"/>
    <el-table-column prop="text" label="文本"/>
    <el-table-column prop="state" label="状态"/>
    <el-table-column prop="createTime" label="创建时间"/>
    <el-table-column prop="updataTime" label="修改时间"/>
    <el-table-column fixed="right" label="设置">
      <!--删除操作-->
      <!--scope它可以取任意字符串 获取wj的信息 table里的信息 wjid -->
      <template #default="scope">
        <el-button link type="primary" size="small" @click="todelNews(scope.row)"
        >删除
        </el-button>
        <el-button link type="primary" size="small" @click="openDialog(scope.row)"
        >编辑
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="example-pagination-block">
    <div class="example-demonstration">When you have few pages</div>
    <el-pagination
        v-model:current-page="queryNewsForm.currentPage"
        v-model:page-size="queryNewsForm.pageSize"
        v-model:total="queryNewsForm.total"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!-- 修改界面-->
  <el-dialog title="编辑新闻信息" v-model="tableDataForm.dialogVisible">
    <el-form :model="modifyNews">

      <el-form-item label="新闻标题">
        <el-input v-model="modifyNews.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="文本">
        <el-input v-model="modifyNews.text" auto-complete="off"/>
      </el-form-item>

      <el-form-item label="状态">
        <el-input v-model="modifyNews.state" auto-complete="off"/>
      </el-form-item>



    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="tableDataForm.dialogVisible=false">取 消</el-button>
      <el-button type="primary" @click="toUpdate">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, onMounted} from 'vue'
import {NewsForm,NewsImpl} from "@/type/NewsAction";
import {delNews, querynews, updataNews} from "@/request/NewsService";
//查询条件 const:常量，只能定义一次
const queryNewsForm = reactive(new NewsImpl()).newsform
//查询结果
const tableData = reactive(new NewsImpl()).newsList
const newsForm = reactive(new NewsImpl()).newsform
// 初始化 弹出 默认看不见
const tableDataForm = reactive({
  dialogVisible: false
});
// 修改对象
const modifyNews = reactive(new NewsImpl()).newsform

//分页
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  //跳转的 页码
  queryNewsForm.pageNum = val
  console.log(queryNewsForm.pageNum)
  queryNews();  // 原查询按钮调用的函数
}

const handleSizeChange = (val: number) => {
  console.log(`current page: ${val}`)
  //跳转的 页码
  queryNewsForm.pageSize = val
  console.log(queryNewsForm.pageSize)
  queryNews();  // 原查询按钮调用的函数
}

//预加载，打开页面就查询显示数据
onMounted(async () => {
  // querygoods(queryGoodsForm).then(
  //     //返回信息  res = response
  //     (res) => {
  //       console.log("res====", res.data)
  //       tableData.goodsList = res.data.data;
  //     }
  // )
  queryNews()
})

//查询操作
const queryNews = () => {
  //获取查询条件
  //调用接口
  querynews(queryNewsForm).then(
      (res) => {
        console.log(res.data.message)
        console.log(res.data.data) //返回具体的数据
        //返回信息 更新页面
        tableData.newsList = res.data.data.list
        queryNewsForm.total = res.data.data.total
        queryNewsForm.pageSize = res.data.data.pageSize
        queryNewsForm.currentPage = res.data.data.pageNum


      }
  )
  console.log('提交成功!')
}

//删除操作
const todelNews = async (delNewsForm: NewsForm) => {
  //获取删除id
  //调用接口
  console.log(delNewsForm);
  await delNews(delNewsForm.id);


  delNews(delNewsForm.id).then(
      (res) => {
        //返回信息，页面更新
        // tableData.goodsList = res.data.data
        // 删除成功后,重新请求
        console.log('删除成功')
        queryNews();
      }
  )

}
const openDialog = (scoprow: NewsForm) => {
  //选中的数据 放到弹出框中
  modifyNews.id = scoprow.id
  modifyNews.name = scoprow.name
  modifyNews.text = scoprow.text
  modifyNews.state = scoprow.state
  modifyNews.updataTime = scoprow.updataTime
  //设置弹出窗口可见
  tableDataForm.dialogVisible = true;
}
//修改
const toUpdate = () => {
  //获取修改id
  //调用接口
  updataNews(modifyNews).then(
      (res) => {
        //返回信息，页面更新
        // tableData.goodsList = res.data.data
        queryNews()
        tableDataForm.dialogVisible = false

      }
  )
  console.log('修改成功')
}


</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}
</style>